<script lang="ts" setup>
import { computed, watch } from "vue";
import { theme as antdTheme } from "ant-design-vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { exposeGlobalIfDev } from "@/framework/vue/util/dev-tools.ts";
import { useCustomTheme } from "./store.ts";
import type { GlobalToken } from "ant-design-vue/es/theme";

dayjs.locale("zh-cn");

defineOptions({ name: "theme-provider" });

const { token } = antdTheme.useToken();

const customTheme = useCustomTheme();

const overrideTokensDark: Partial<GlobalToken> = {
  colorBgContainer: "#15141B",
  colorBgElevated: "#121016",
};
const overrideTokensLight: Partial<GlobalToken> = {};

const overrideTokens = computed<Partial<GlobalToken>>(() => {
  return {
    colorPrimary: customTheme.colorPrimary,
    borderRadius: 4,
    ...(customTheme.variant === "dark" ? overrideTokensDark : overrideTokensLight),
  };
});

watch(
  () => customTheme.variant,
  value => {
    const len = document.body.classList.length;
    for (let i = len - 1; i >= 0; i--) {
      const className = document.body.classList.item(i);
      if (className?.startsWith("theme-")) {
        document.body.classList.remove(className);
      }
    }
    document.body.classList.add(`theme-${value}`);
  },
  { immediate: true },
);

watch(
  token,
  (value: GlobalToken) => {
    const variables = {
      "--color-text": value.colorText,
      "--color-text-secondary": value.colorTextSecondary,
      "--color-text-tertiary": value.colorTextTertiary,
      "--color-disabled": value.colorTextDisabled,

      "--color-primary": value.colorPrimary,
      "--color-primary-active": value.colorPrimaryActive,
      "--color-primary-hover": value.colorPrimaryHover,
      "--color-primary-border": value.colorPrimaryBorder,
      "--color-primary-border-hover": value.colorPrimaryBorderHover,
      "--color-primary-text": value.colorPrimaryText,
      "--color-primary-text-hover": value.colorPrimaryTextHover,
      "--color-primary-text-active": value.colorPrimaryTextActive,
      "--color-primary-bg": value.colorPrimaryBg,
      "--color-primary-bg-hover": value.colorPrimaryBgHover,

      "--color-info": value.colorInfo,
      "--color-success": value.colorSuccess,
      "--color-warning": value.colorWarning,
      "--color-error": value.colorError,

      "--color-bg-base": value.colorBgBase,
      "--color-bg-container": value.colorBgContainer,
      "--color-bg-container-disabled": value.colorBgContainerDisabled,
      "--color-bg-elevated": value.colorBgElevated,
      "--color-bg-layout": value.colorBgLayout,
      "--color-bg-mask": value.colorBgMask,
      "--color-bg-spotlight": value.colorBgSpotlight,

      "--color-bg-text-hover": value.colorBgTextHover,

      "--border-radius": `${value.borderRadius}px`,
      "--border-color": value.colorBorder,
      "--border-color-secondary": value.colorBorderSecondary,
      "--box-shadow": value.boxShadow,
    };

    Object.entries(variables).forEach(([k, v]) => {
      document.documentElement.style.setProperty(k, v?.toString());
    });

    exposeGlobalIfDev("__theme_tokens__", value);
  },
  { immediate: true },
);
</script>

<template>
  <a-config-provider
    :locale="zhCN"
    :theme="{
      token: overrideTokens,
      algorithm: customTheme.themeVariants[customTheme.variant],
    }"
  >
    <slot />
  </a-config-provider>
</template>

<style scoped lang="less"></style>
